<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>我的信息</title>
    <jsp:include page="common/common_css.jsp"/>
    <style>
        .a-t-r {
            position: absolute !important;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <jsp:include page="common/message.jsp"/>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 0.5em;margin-bottom: 20px;">
                <form class="ui large form" method="post" action="${pageContext.request.contextPath}/sale/own">
                    <label>商家信息：</label>
                    <div class="ui stacked segment">
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    商家邮箱：
                                </div>
                                <input disabled name="email" type="text" value="${cutUserSale.user.email}">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    商家名称：
                                </div>
                                <input name="name" type="text" value="${cutUserSale.userSale.name}" maxlength="50">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    商家公告：
                                </div>
                                <input name="introduce" type="text" value="${cutUserSale.userSale.introduce}"
                                       maxlength="200">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    联系电话：
                                </div>
                                <input name="phone" type="text" value="${cutUserSale.userSale.phone}"
                                       maxlength="50">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    配送时间：
                                </div>
                                <input name="deliveryTime" type="text" value="${cutUserSale.userSale.deliveryTime}"
                                       maxlength="50" placeholder="例如（09:00-20:00）">
                            </div>
                        </div>
                        <div class="field">
                            <input name="deliveryPrice" type="hidden" value="${cutUserSale.userSale.deliveryPrice}">
                            <div class="ui right labeled input">
                                <div class="ui label">
                                    配送费用：
                                </div>
                                <input name="deliveryPriceTemp" type="number" min="0"
                                       value="${cutUserSale.userSale.deliveryPrice/100}">
                                <div class="ui basic label">元</div>
                            </div>
                        </div>
                        <div class="field">
                            <input id="JS-status-input" name="status" type="hidden"
                                   value="${cutUserSale.userSale.status}">
                            <div class="ui simple dropdown large label">
                                <div>商家状态：<label id="JS-status-name">
                                    <c:choose>
                                        <c:when test="${cutUserSale.userSale.status==1}">
                                            营业中
                                        </c:when>
                                        <c:when test="${cutUserSale.userSale.status==2}">
                                            休息中
                                        </c:when>
                                        <c:otherwise>
                                            不知道的值
                                        </c:otherwise>
                                    </c:choose>
                                </label><i class="dropdown icon"></i></div>
                                <div class="menu">
                                    <div class="item JS-status" data-status="1">
                                        <label>营业中</label>
                                    </div>
                                    <div class="item JS-status" data-status="2">
                                        <label>休息中</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="ui fluid large teal submit button disabled">完成修改</button>
                        <div id="JS-error-message" class="ui error message"></div>
                    </div>
                </form>
            </div>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 0.5em;margin-bottom: 20px;position: relative;">
                <label>配送费优惠：</label>
                <c:if test="${fn:length(deliveryDiscounts)<2}">
                    <i class="add large icon a-t-r JS-add"></i>
                </c:if>
                <table class="ui celled padded table">
                    <thead>
                    <tr>
                        <th class="center aligned">满</th>
                        <th class="center aligned">配送费</th>
                        <th class="center aligned">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:choose>
                        <c:when test="${fn:length(deliveryDiscounts) > 0}">
                            <c:forEach items="${deliveryDiscounts}" var="deliveryDiscount">
                                <tr data-id="${deliveryDiscount.id}">
                                    <td class="center aligned">${deliveryDiscount.full/100}元</td>
                                    <td class="center aligned">${deliveryDiscount.deliveryPrice/100}元</td>
                                    <td class="center aligned">
                                        <button class="ui basic button JS-remove">
                                            <i class="remove circle icon"></i>
                                            移除
                                        </button>
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <tr>
                                <td class="center aligned" colspan="3">没有优惠，<a href="" class="JS-add">点击添加</a></td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                    </tbody>
                </table>
            </div>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 0.5em;margin-bottom: 20px;">
                <label>封面图片：</label>
                <i id="JS-cover-change" class="exchange large icon a-t-r"></i>
                <div class="ui stacked segment">
                    <c:choose>
                        <c:when test="${cutUserSale.userSale.imageKey==null||cutUserSale.userSale.imageKey==''}">
                            <img id="JS-cover" src="${pageContext.request.contextPath}/images/logo.jpg"
                                 style="max-width: 28em;" alt="封面图">
                        </c:when>
                        <c:otherwise>
                            <img id="JS-cover" src="${downDomain}${cutUserSale.userSale.imageKey}"
                                 style="max-width: 28em;"
                                 alt="封面图">
                        </c:otherwise>
                    </c:choose>
                    <div id="JS-progress" class="ui active centered inline loader" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="JS-modal-input" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div class="header" style="display: inline-block;color: black;margin-bottom: 20px;">
                新增配送优惠
            </div>
            <br>
            <div class="ui input mini" style="margin-bottom: 20px;">
                <input name="full" type="number" min="0" placeholder="满">
            </div>
            <br>
            <div class="ui input mini" style="margin-bottom: 20px;">
                <input name="deliveryPrice" type="number" min="0" placeholder="配送费">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>
<!--确认弹窗-->
<div id="JS-modal-confirm" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div id="JS-modal-confirm-title" style="display: inline-block;color: black;margin-bottom: 50px;">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        var CJ = {
            data: {},
            event: {
                registerGlobal: function () {
                    $('.JS-status').click(function () {
                        var status = $(this).data('status');
                        var text = $(this).text();
                        $('#JS-status-input').val(status);
                        $('#JS-status-name').text(text);
                        $('form .submit.button').removeClass('disabled');
                    });
                    $('input[name=name],input[name=introduce],input[name=phone],input[name=deliveryTime],input[name=deliveryPriceTemp]').bind('input propertychange', function () {
                        $('form .submit.button').removeClass('disabled');
                    });
                    $('.ui.form').submit(function () {
                        $('input[name=deliveryPrice]').val(common.yuan2fen($('input[name=deliveryPriceTemp]').val()));
                    });
                    $('.JS-add').click(function () {
                        $('#JS-modal-input input').val("");
                        $('#JS-modal-input').modal({
                            allowMultiple: true, observeChanges: true,
                            onApprove: function () {
                                var full = $('#JS-modal-input input[name=full]').val();
                                if (full === '') {
                                    alert("请输入内容。");
                                    return false;
                                }
                                var deliveryPrice = $('#JS-modal-input input[name=deliveryPrice]').val();
                                if (deliveryPrice === '') {
                                    alert("请输入内容。");
                                    return false;
                                }
                                if ($('#JS-modal-input .actions .approve.button').hasClass('loading')) {
                                    return false;
                                }
                                $('#JS-modal-input .actions .approve.button').addClass('loading');
                                common.ajax({
                                    url: ROOT + "/sale/own/deliveryDiscount",
                                    data: {
                                        full: common.yuan2fen(full),
                                        deliveryPrice: common.yuan2fen(deliveryPrice),
                                    },
                                    type: 'post',
                                    dataType: 'json',
                                    success: function (data) {
                                        var deliveryDiscount = data;
                                        var html = [];
                                        html.push('<tr data-id="' + deliveryDiscount.id + '">');
                                        html.push(' <td class="center aligned">' + (deliveryDiscount.full / 100) + '元</td>');
                                        html.push('<td class="center aligned">' + (deliveryDiscount.deliveryPrice / 100) + '元</td>');
                                        html.push('<td class="center aligned">');
                                        html.push('<button class="ui basic button JS-remove">');
                                        html.push('<i class="remove circle icon"></i>');
                                        html.push(' 移除');
                                        html.push(' </button>');
                                        html.push('</td>');
                                        html.push(' </tr>');
                                        if ($('.js-add').length == 1) html.push($('table tbody').html());
                                        $('table tbody').html(html.join(''));
                                        CJ.event.registerRemove();
                                        $('#JS-modal-input').modal('hide');
                                    },
                                    complete: function () {
                                        $('#JS-modal-input .actions .approve.button').removeClass('loading');
                                    }
                                });
                                return false;
                            },
                            onDeny: function () {
                                return !$('#JS-modal-input .actions .approve.button').hasClass('loading');
                            }
                        }).modal("show");
                        return false;
                    });

                    //封面
                    Qiniu.uploader({
                        runtimes: 'html5,flash,html4',      // 上传模式，依次退化
                        browse_button: 'JS-cover-change',         // 上传选择的点选按钮，必需
                        uptoken_url: ROOT + '/sale/own/coverToken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
                        get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
                        domain: config.download,     // bucket域名，下载资源时用到，必需
                        max_file_size: '100mb',             // 最大文件体积限制
                        flash_swf_url: 'https://cdn.staticfile.org/plupload/2.1.9/Moxie.swf',  //引入flash，相对路径
                        max_retries: 3,                     // 上传失败最大重试次数
                        dragdrop: false,                     // 开启可拖曳上传
                        chunk_size: '4mb',                  // 分块上传时，每块的体积
                        auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                        init: {
                            'FilesAdded': function (up, files) {
                                if (up.files.length > 1) { // 最多上传1张图
                                    up.splice(0, up.files.length - 1);
                                }
                            },
                            'BeforeUpload': function (up, file) {
                                // 每个文件上传前，处理相关的事情
                                window.common.previewImage(file, function (imgsrc) {
                                    CJ.data.oldImageUrl = $('#JS-cover').attr('src');
                                    $('#JS-cover').attr('src', imgsrc);
                                });
                                $('#JS-progress').text('0%');
                                $('#JS-progress').show();
                            },
                            'UploadProgress': function (up, file) {
                                // 每个文件上传时，处理相关的事情
                                $('#JS-progress').text(file.percent + '%');
                            },
                            'FileUploaded': function (up, file, info) {
                                var json = window.JSON.parse(info);
                                if (json.code != 1) {
                                    alert('上传失败');
                                    $('#JS-cover').attr('src', CJ.data.oldImageUrl);
                                }
                            },
                            'Error': function (up, err, errTip) {
                                //上传出错时，处理相关的事情
                                alert('上传失败');
                                $('#JS-cover').attr('src', CJ.data.oldImageUrl);
                            },
                            'UploadComplete': function () {
                                //队列文件处理完毕后，处理相关的事情
                                $('#JS-progress').hide();
                            },
                        }
                    });
                },
                registerRemove: function () {
                    $('.JS-remove').unbind('click').click(function () {
                        var dom = $(this).parent().parent();
                        var id = dom.data('id');
                        $('#JS-modal-confirm-title').text("确定删除该配送优惠？");
                        $('#JS-modal-confirm').modal({
                            allowMultiple: true, observeChanges: true,
                            onApprove: function () {
                                if ($('#JS-modal-confirm .actions .approve.button').hasClass('loading')) {
                                    return false;
                                }
                                $('#JS-modal-confirm .actions .approve.button').addClass('loading');
                                common.ajax({
                                    url: ROOT + "/sale/own/deliveryDiscount/" + id + "/delete",
                                    type: 'post',
                                    dataType: 'json',
                                    success: function (data) {
                                        dom.remove();
                                        $('#JS-modal-confirm').modal('hide');
                                    },
                                    complete: function () {
                                        $('#JS-modal-confirm .actions .approve.button').removeClass('loading');
                                    }
                                });
                                return false;
                            },
                            onDeny: function () {
                                return !$('#JS-modal-confirm .actions .approve.button').hasClass('loading');
                            }
                        }).modal("show");
                    });
                }
            },
            request: {},
            ui: {},
            init: function () {
                CJ.event.registerGlobal();
                CJ.event.registerRemove();
            }
        };
        $('.ui.form')
            .form({
                fields: {
                    name: {
                        identifier: 'name',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请输入名字。'
                            }
                        ]
                    }
                }
            })
        ;
        CJ.init();
    });
</script>
</body>
</html>
